<template>
    <div class="container">
        <div class="handle-box" >
            <span class="mr10"> 选择属性 {{selectValueName}} </span>
            <el-form :model="attributeValueForm" :label-width="formLabelWidth" style="margin-top:10px">
                <span class="mr10">属性值</span><el-input v-model="attrLabel" class="handle-input mr10" />
                <span class="mr10">值排序</span><el-input-number v-model="sort" :min="1" :max="10" size="small" class="handle-input mr10" />
                <el-button type="success" @click="func_addTableData" class="mr10" plain>添加属性值</el-button>
            </el-form>
        </div>
        <div class="form-box" >
            <el-table :data="attributeValueTableData" row-key="id" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="index" width="100" align="center">
                    <template #default="scope">
                    {{scope.$index +1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="id" v-if="false" />
                <el-table-column prop="attrLabel" label="属性值">
                    <template #default="scope">
                        <el-input v-model="scope.row.attrLabel" class="handle-input mr10" />
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序">
                    <template #default="scope">
                        <el-input v-model="scope.row.sort" class="handle-input mr10" v-if="false"/>
                        <el-input-number v-model="scope.row.sort" :min="1" :max="10" size="small"/>
                    </template>
                </el-table-column>
                <el-table-column width="160" label="操作">
                    <template #default="scope">
                        <el-button type="text" class="green" @click="func_handlerSave(scope.$index, scope.row)"> <i class="el-icon-edit" /> 保存</el-button>
                        <el-button type="text" class="red" @click="func_handlerDel(scope.$index, scope.row.id)"> <i class="el-icon-delete" />删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="dataTotal" @current-change="func_handlePageChange"></el-pagination>
            </div>
            <el-button @click="func_onClose" plain>关闭</el-button>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter,useRoute } from 'vue-router';
import { saveAttributeValue, batchSaveAttributeValueList, deleteAttributeValue, findAttributeValueListPage } from '../../../../api/hairmanager/productAttributeValue';
import { findAttributeInfoById } from '../../../../api/hairmanager/productAttribute';

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

export default {
    name: "attributeValueForm",
  	props:{
		selectValue: Object,
	},
	emits: ["attributeValueData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();

        const formLabelWidth = ref("170px");
        const selectValueId = ref(0);
        const selectValueName = ref("");
        const attrLabel = ref("");
        const sort = ref(0);
        /**
         * @name 定义业务表单
         */
        const getFormData = () => {
            return {
				id: 0,
				attrId: 0,
				sort: "",
				attrLabel: "",
            }
        };
        /**
         * @name 表单初始化
         */
        const resetFormData = () => {
            Object.assign(attributeValueForm, getFormData());
        };
        /**
         * @name 映射表单
         */
        const attributeValueForm = reactive(getFormData());
        const query = reactive({
            attrId: 0,
            pageNum: 1,
            pageSize: 10,
        });
        const dataTotal = ref(0);
		const attributeValueTableData = ref([]);
		// =========================================================================================
        const func_onLoad =(v) => {
            query['attrId'] = v;
            findAttributeValueListPage(query).then((res) => {
                attributeValueTableData.value = res.data.list;
                dataTotal.value = res.data.total;
            });
        };
        /**
         * @name 分页导航
         */
        const func_handlePageChange = (val) => {
            query.pageNum = val;
            func_onLoad();
        };
        const func_addTableData = () => {
            attributeValueForm.id= null;
            attributeValueForm.attrId= selectValueId.value;
            attributeValueForm.attrLabel= attrLabel;
            attributeValueForm.sort= sort;
            func_saveData();
        };
        const func_handlerSave = (index, row) => {
            attributeValueForm.id= row['id'];
            attributeValueForm.attrId= selectValueId.value;
            attributeValueForm.attrLabel= row['attrLabel'];
            attributeValueForm.sort= row['sort'];
            func_saveData();
        };
        const func_handlerDel = (index ,id) => {
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",}).then(() => {
                func_delData(id);
            }).catch(() => {});
        };
        // 重置
        const func_onClose = () => {
            cex.emit('attributeValueData', {state: 1, data: []});
        };
        const func_saveData = () => {
            saveAttributeValue(attributeValueForm).then((res) => {
                if(res.code != 200) {
                    ElMessage.error(res.message);
                } else {
                    ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
                    func_onLoad(selectValueId.value);
                }
            });
        }
        const func_delData = (v) => {
            deleteAttributeValue(v).then((res) => {
                if(res.code != 200) {
                    ElMessage.error(res.message);
                } else {
                    ElMessage.success(SUCCESS_DELDATA_DIALOG_MESSAGE);
                    func_onLoad(selectValueId.value);
                }
            });
        }
		// =========================================================================================
        watch(() => props.selectValue, (val) => {
            selectValueId.value = props.selectValue['selectValueId'];
            selectValueName.value = props.selectValue['selectValueName'];
            func_onLoad(selectValueId.value);
        },{deep: true, immediate: true});
        return {
            formLabelWidth, selectValueId, selectValueName, query, attributeValueTableData, dataTotal,
			sort, attrLabel, attributeValueForm,
            func_onLoad, func_addTableData, func_onClose, func_saveData, func_delData, func_handlePageChange,
            func_handlerSave, func_handlerDel,
        };
    },
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 150px;
}

.handle-input {
    width: 150px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green {
    color: #67c23a;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>